<script setup>
import Code from './code.vue'
import { listDept } from '@/api/system/dept'
const { proxy } = getCurrentInstance()
const props = defineProps({
  data: {
    type: Object,
    defalut: {}
  },
  disabled: {
    type: Boolean,
    deflaut: false
  },
  title: {
    type: String,
    deflaut: false
  }
})

// 封装 方法 字典查询
const {
  sample_standard // 委外类型
} = proxy.useDict('sample_standard')

const ruleFormRef = ref(null)
// 物料弹窗
const materialShow = ref(false)
const deptOptions = ref([])
//  列表
const TableData = ref([{}])
// 表单字段
const ruleForm = reactive({
  demandDepartment: '', // 部门
  remark: '', // 备注
  sampleList: [
    {
      materialCategory: '', // 物料类型
      materialId: '', // 物料id
      materialCode: '', // 物料编码
      deliveryDate: '', // 交货日期
      qualityStandard: '', // 质量标准
      proofingWeight: '' // 打样数量
    }
  ]
})

// 回显
if (props.data?.id) {
  for (let Key in props.data) {
    ruleForm[Key] = props.data[Key]
  }
}

// 校验
const rules = reactive({
  demandDepartment: [{ required: true, message: '请选择部门', trigger: 'change' }],
  reviewComments: [{ required: true, message: '请填写审核意见', trigger: 'brul' }]
})

// 物料选择
const materialSelsct = val => {
  // console.log(val)
  ruleForm.sampleList = [val]
  ruleForm.sampleList[0].materialCategory = val.materialType
  materialShow.value = false
}

// 提交
const submit = () => {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate((valid, fields) => {
      if (!valid) {
        proxy.warningMsg('请填写完整')
        resolve(false)
        return
      }
      const isif = ruleForm.sampleList.every(item => item.proofingWeight && item.qualityStandard && item.deliveryDate)
      if (!isif) return proxy.warningMsg('明细项请填写完整')

      const numberEvery = ruleForm.sampleList.every(item => item.proofingWeight > 1)
      if (!numberEvery) return proxy.warningMsg('打样数量不能小于1')
      resolve(ruleForm)
    })
  })
}

function handleAdd(row) {
  listDept().then(response => {
    deptOptions.value = proxy.handleTree(response.data, 'deptId')
  })
  if (row != undefined) {
    ruleForm.demandDept = ''
  }
}
handleAdd()
defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm" status-icon>
      <el-form-item label="部门" prop="demandDepartment">
        <el-tree-select
          v-model="ruleForm.demandDepartment"
          :data="deptOptions"
          :disabled="props.disabled"
          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
          value-key="deptId"
          placeholder="选择上级部门"
          check-strictly
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          :disabled="props.disabled"
          autosize
          clearable
          v-model="ruleForm.remark"
          :rows="2"
          type="textarea"
          placeholder="请输入内容"
          :input-style="{ width: '95%' }"
        />
      </el-form-item>
      <el-form-item label="审核意见" prop="reviewComments" v-if="props.title == '审核' || props.title == '查看'">
        <el-input
          autosize
          clearable
          v-model="ruleForm.reviewComments"
          :disabled="props.title == '查看'"
          :rows="2"
          type="textarea"
          placeholder="请输入内容"
          :input-style="{ width: '95%' }"
        />
      </el-form-item>
    </el-form>
    <div class="title">明细项</div>
    <el-table stripe border :data="ruleForm.sampleList" style="margin-top: 10px">
      <el-table-column label="序号" width="70" type="index" />
      <el-table-column label="产品编码" width="150">
        <template #default="scope">
          <el-input
            :disabled="props.disabled"
            @click="materialShow = true"
            :suffix-icon="Search"
            clearable
            v-model="scope.row.materialCode"
          />
        </template>
      </el-table-column>
      <el-table-column label="产品名称" width="120" prop="materialName" />
      <el-table-column label="产品类别" width="120" prop="materialCategoryDict" />
      <el-table-column label="规格型号" width="120" prop="specType" />

      <el-table-column label="打样数量" width="150">
        <template #default="scope">
          <el-input
            type="number"
            oninput="if(value<=0)value=''"
            :disabled="props.disabled"
            clearable
            v-model="scope.row.proofingWeight"
          />
        </template>
      </el-table-column>
      <el-table-column label="质量标准" width="300">
        <template #default="scope">
          <el-select :disabled="props.disabled" v-model="scope.row.qualityStandard" placeholder="请选择质量标准">
            <el-option :label="item.label" :value="item.value" v-for="(item, index) in sample_standard" :key="index" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="交货日期" width="300">
        <template #default="scope">
          <el-date-picker
            :disabled="props.disabled"
            v-model="scope.row.deliveryDate"
            type="datetime"
            placeholder="请选择需求时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 物料弹窗 -->
    <p-XiaoheDialog :dialogVisible="materialShow" title="物料选择" @close="materialShow = false" width="50%">
      <template #body>
        <Code @preservation="materialSelsct" @cancel="materialShow = false" />
      </template>
    </p-XiaoheDialog>
  </div>
</template>

<style lang="scss" scoped></style>
